<!--复选框-->
<template>
  <div class="tableClass p20">
    <table cellspacing="0">
      <tr>
        <th>1) 颜色</th>
      </tr>
      <tr>
        <td>
          <div class="common bg">背景色  $color-bg</div>
          <div class="common line">线的颜色  $color-line</div>
          <div class="common grid">灰色  $color-grid</div>
          <div class="common light">轻度主题色  $color-light</div>
          <div class="common color">主题色  $color</div>
          <div class="common hover">hover的颜色  $color-hover</div>
          <div class="common red">警告色  $color-red</div>
          <div class="common font">字体颜色  $color-font</div>
        </td>
      </tr>
      <tr>
        <th>1) 其它</th>
      </tr>
      <tr>
        <td>
          @include shadow; 阴影<br>
          @include ellipsis; 省略号
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

  export default {
    name: ''
  }
</script>

<style lang="scss"scoped>
  .common{
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin-bottom: 5px;
    color: #fff;
  }
  .bg{
    background: $color-bg;
    color: $color;
  }
  .color{
    background: $color;
  }
  .hover{
    background: $color-hover;
  }
  .line{
    background: $color-line;
    color: $color;
  }
  .light{
    background: $color-light;
  }
  .grid{
    background: $color-grid;
  }
  .red{
    background: $red;
  }
  .font{
    background: $color-font;
  }
</style>
